<template>
	<view class="" style="background: #AEE2DA;min-height: 100vh;">
		<cu-custom bgColor="bg-newblue" shop="true" :isBack="true"><block slot="content">碎片商城</block></cu-custom>
		<view class="bg-newblue padding-sm cu-form-group">
			<text class="text-ablack">我的碎片:{{cores}}</text>
			<view class='cu-tag line-black radius' @click="backbackpack()">回到赏袋</view>
		</view>
		<!--<view style="width: 100%;height: 20upx;"></view>-->
		<scroll-view scroll-x class="nav" scroll-with-animation 
			:scroll-left="scrollLeft" >
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'click_topbtn text-white':'text-newblack'"
				 v-for="(item,index) in tap" 
				 :key="index" @tap="tabSelect" :data-id="index" style="height: 60rpx;line-height: 60rpx;">
					{{tap[index]}}
				</view>
			</view>
		</scroll-view>
		<view class="cu-list grid col-3 margin-top-xs" style="margin: 15upx 15upx;border-radius: 10upx;">
			<view class="cu-item" v-for="(item,index) in list" :key="index" @click="showGood(item.id)" style="padding: 0 0 0 0;">
				<view style="width: 100%;height: 38upx;"></view>
				<view class="" style="padding: 0 20upx">
					<image :src="item.adimage" mode="widthFix"></image>
				</view>
				<view style="width: 100%;height: 10upx;"></view>
				<view class="text-left padding-left-xs text-ablack" style="line-height: 60upx;height: 60upx;">{{item.name}}</view>
				<view style="width: 100%;height: 20upx;"></view>
				<view class="text-left padding-left-xs text-red flex" style="line-height: 10upx;" v-if="item.price == item.origin_price">{{item.price}}碎片
				</view>
				<view class="text-left padding-left-xs text-gray flex" v-if="item.price != item.origin_price">
					<text style=" text-decoration:line-through;">{{item.origin_price}}</text>
					<text style="color: #f34444;padding-left: 10upx;">{{item.price}}碎片
					</text>
				</view>
				<view class="text-left padding-left-xs text-gray">
					<text style="padding-right: 10upx;color: #c1c1c1;">剩余库存:{{item.stock}}</text>
				</view>
				<view class="bg-black" 
				style="position: absolute;left: 7%;top: 10%;width: 86%;height:51%;z-index: 20;opacity: 0.7;display: flex;justify-content: center;align-items: center;"
				v-if="item.stock <= 0">
					<image :src="Imgbase + '/shopsellout.png'" mode="widthFix" style="width: 170upx;height: 170upx;"></image>
				</view>
			</view>
		</view>
		<!--<view class="bg-blue" style="position: fixed;left: 0%;top: 85%;padding: 10upx 20upx;border-radius: 0 30upx 30upx 0;">
			<view >我的碎片:{{cores}}</view>
		</view>-->
		<view style="width: 100%;height: 140upx;"></view>
		<view class="cu-load load-modal" v-if="loadModal">
			<image src="/static/icon.jpg" mode="aspectFit"></image>
			<view class="gray-text">加载中...</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Imgbase:getApp().globalData.Imgbase,
				TabCur: 0,
				scrollLeft: 0,
				tap:[],
				ids:[],
				loadModal: false,
				list:[],
				page:1,
				count:0,
				hasData: true,
				cores:0,
			};
		},
		onLoad: function (options) {
			this.loadclassify();
		},
		onShow() {
			this.getuser();
		},
		methods: {
			backbackpack(){
				uni.reLaunch({
					url: `/pages/index/index?mes=backpack`
				});
			},
			showGood(id){
				uni.navigateTo({
					url: `/pages/goodspoor/shopgood?id=${id}`
				});
			},
			getuser(){
				let _this = this;
				uni.request({
					url: _this.$globals.apibase+'/api/Shop/userCore',
					data: {
						token: uni.getStorageSync('token'),
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if(res.data.code == '401'){
							uni.setStorageSync('token', '');
							_this.$uniApi.trylogin();
						}
						if(res.data.code == '1'){
							_this.cores = res.data.data.user_desc.cores;
						}
					}
				});
			},
			loadclassify(){
				let _this = this;
				uni.request({
					url: _this.$globals.apibase+'/api/Shop/classify',
					data: {
						token: uni.getStorageSync('token'),
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if(res.data.code == '401'){
							uni.setStorageSync('token', '');
							_this.$uniApi.trylogin();
						}
						if(res.data.code == '1'){
							_this.tap = res.data.data.names;
							_this.ids = res.data.data.ids;
							_this.loadlist();
						}
						if(res.data.code == '0'){
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
					}
				});
			},
			loadlist(){
				let _this = this;
				_this.loadModal = true;
				uni.request({
					url: _this.$globals.apibase+'/api/Shop/goodlist',
					data: {
						token: uni.getStorageSync('token'),
						page: _this.page,
						shop_classify_id: _this.ids[_this.TabCur],
					},
					method: 'POST',
					header: {
						'content-type': 'application/json'
					},
					success: (res) => {
						if(res.data.code == '401'){
							uni.setStorageSync('token', '');
							_this.$uniApi.trylogin();
						}
						if(res.data.code == '1'){
							_this.count = res.data.data.count;
							for(let i=0;i<res.data.data.list.length;i++){
								_this.list = _this.list.concat(res.data.data.list[i])
							}
							if(_this.list.length >= _this.count){
								_this.hasData = false
							}
						}
						if(res.data.code == '0'){
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							});
						}
						_this.loadModal = false;
					}
				});
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
				this.page = 1;
				this.list = [];
				this.hasData = true;
				this.loadlist();
			},
		},
		onReachBottom() {
			var _this=this;
			if (_this.hasData) {
				_this.page++;
				_this.loadlist();
			}
		},
	}
</script>

<style>
	.click_topbtn{
		background-color: #ff9756;
		border-radius: 10upx;
	}
</style>
